<template>
  <el-card class="container">
    <div class="card">
      <div class="child" ref="chart1">1</div>
      <div class="child" ref="chart2">2</div>
      <div class="child" ref="chart3">3</div>
      <div class="child" ref="chart4">4</div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    var chartDom1 = this.$refs.chart1;
    var chartDom2 = this.$refs.chart2;
    var chartDom3 = this.$refs.chart3;
    var chartDom4 = this.$refs.chart4;
    var myChart1 = echarts.init(chartDom1);
    var myChart2 = echarts.init(chartDom2);
    var myChart3 = echarts.init(chartDom3);
    var myChart4 = echarts.init(chartDom4);
    this.setOptions(myChart1, '借阅人群画像',[{value:20,name: '儿童'},{value:44,name: '青少年'},{value:80,name: '学生'},{value:35,name: '老年人'},{value:85,name: '中年人'}]);
    this.setOptions(myChart2, '借阅人群年龄',[{value:27,name: '1-10'},{value:30,name: '10-20'},{value:100,name: '20-40'},{value:35,name: '40-60'},{value:20,name: '60以上'}]);
    this.setOptions(myChart3, '借阅书籍类型',[{value:50,name: '小说及文学'},{value:44,name: '历史'},{value:66,name: '投资理财'},{value:35,name: '地理'},{value:100,name: '辅导教材'}]);
    this.setOptions(myChart4, '借阅人员类型',[{value:100,name: '学生及教师'},{value:44,name: '在职工作者'},{value:60,name: '自由工作者'},{value:35,name: '无业人员'},{value:10,name: '未知'}]);
  },
  methods: {
    setOptions(c,text,data) {
      const option = {
        title: {
          text,
          left: "center",
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data,
          },
        ],
      };
      c.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 99%;
}
.card {
  display: flex;
  flex-wrap: wrap;
  .child {
    height: 280px;
    flex: 50%;
  }
}
</style>